<ix-fake-progress-bar
  [loading]="(dataProvider.isLoading$ | async) || false"
></ix-fake-progress-bar>

<div class="header">
  <h1 mat-dialog-title>{{ 'Volumes' | translate }}</h1>
  <button
    mat-icon-button
    [ixTest]="['close-dialog']"
    [attr.aria-label]="'Close Dialog' | translate"
    (click)="dialogRef.close(null)"
  >
    <ix-icon name="cancel"></ix-icon>
  </button>
</div>

<mat-dialog-content class="content">
  <ix-table
    class="table"
    [ix-table-empty]="!(dataProvider.currentPageCount$ | async)"
    [emptyConfig]="emptyService.defaultEmptyConfig(dataProvider.emptyType$ | async)"
  >
    <thead
      ix-table-head
      [columns]="columns()"
      [dataProvider]="dataProvider"
    ></thead>
    <tbody
      ix-table-body
      [columns]="columns()"
      [dataProvider]="dataProvider"
      [isLoading]="!!(dataProvider.isLoading$ | async)"
    ></tbody>
  </ix-table>

  <div class="controls">
    <div>
      <button
        mat-button
        [ixTest]="['create-volume']"
        (click)="createVolume()"
      >
        <ix-icon name="add"></ix-icon>
        {{ 'Create Volume' | translate }}
      </button>

      <button
        mat-button
        [ixTest]="['import-zvols']"
        (click)="importZvols()"
      >
        <ix-icon name="mdi-database"></ix-icon>
        {{ 'Import Zvols' | translate }}
      </button>
    </div>
    <div>
      <ix-upload-iso (uploaded)="onImageUploaded()"></ix-upload-iso>
      <button
        mat-button
        [ixTest]="['import-iso']"
        (click)="importIso()"
      >
        <ix-icon name="mdi-database"></ix-icon>
        {{ 'Import ISO' | translate }}
      </button>
    </div>
  </div>
</mat-dialog-content>
